{% from "macros.html" import render_pagination %}

<!DOCTYPE html>
<html>
<head>
    <title>订单管理</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
</head>
<body>
    <div class="container">
        <h1 class="page-title">订单管理</h1>
        <div class="nav-menu">
            <a href="{{ url_for('index') }}" class="nav-item">返回首页</a>
            {% if current_status %}
            <a href="{{ url_for('orders') }}" class="nav-item" style="background-color: #6c757d;">清除筛选</a>
            {% endif %}
            <a href="#" class="nav-item add-btn" onclick="showModal()">新增订单</a>
        </div>
        
        {% if current_status %}
        <div class="filter-info">
            <p>当前筛选：{{ current_status }} 
                <span class="badge" style="background-color: 
                    {% if current_status == '待维修' %}#fff3cd; color: #000;
                    {% elif current_status == '维修中' %}#cce5ff;
                    {% elif current_status == '已完成' %}#d4edda;
                    {% else %}#f8d7da;
                    {% endif %}">
                    {{ orders|length }} 条记录
                </span>
            </p>
        </div>
        {% endif %}
        
        <!-- 新增订单模态框 -->
        <div id="addModal" class="modal">
            <div class="modal-content">
                <span class="close" onclick="hideModal()">&times;</span>
                <h2>新增订单</h2>
                <form action="{{ url_for('add_order') }}" method="POST">
                    <div class="form-group">
                        <label for="customer">选择客户</label>
                        <select id="customer" name="customer_id" required>
                            {% for customer in customers %}
                            <option value="{{ customer.id }}">{{ customer.name }}</option>
                            {% endfor %}
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="vehicle">选择车辆</label>
                        <select id="vehicle" name="vehicle_id" required>
                            {% for vehicle in vehicles %}
                            <option value="{{ vehicle.id }}">{{ vehicle.plate_number }}</option>
                            {% endfor %}
                        </select>
                    </div>
                    <button type="submit" class="nav-item add-btn">创建订单</button>
                </form>
            </div>
        </div>
        
        <!-- 在现有模态框后添加编辑模态框 -->
        <div id="editModal" class="modal">
            <div class="modal-content">
                <span class="close" onclick="hideEditModal()">&times;</span>
                <h2>编辑订单</h2>
                <form action="{{ url_for('edit_order') }}" method="POST">
                    <input type="hidden" id="edit_id" name="id">
                    <div class="form-group">
                        <label for="edit_customer">选择客户</label>
                        <select id="edit_customer" name="customer_id" required>
                            {% for customer in customers %}
                            <option value="{{ customer.id }}">{{ customer.name }}</option>
                            {% endfor %}
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="edit_vehicle">选择车辆</label>
                        <select id="edit_vehicle" name="vehicle_id" required>
                            {% for vehicle in vehicles %}
                            <option value="{{ vehicle.id }}">{{ vehicle.plate_number }}</option>
                            {% endfor %}
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="edit_status">维修状态</label>
                        <select id="edit_status" name="status" required>
                            <option value="待维修">待维修</option>
                            <option value="维修中">维修中</option>
                            <option value="已完成">已完成</option>
                            <option value="已取消">已取消</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="edit_repair_notes">维修备注</label>
                        <textarea id="edit_repair_notes" name="repair_notes"></textarea>
                    </div>
                    <button type="submit" class="nav-item add-btn">保存</button>
                </form>
            </div>
        </div>
        
        <div class="section">
            <table>
                <thead>
                    <tr>
                        <th>订单号</th>
                        <th>客户名称</th>
                        <th>车牌号</th>
                        <th>创建时间</th>
                        <th>维修状态</th>
                        <th>总金额</th>
                        <th>操作员</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    {% for order in orders %}
                    <tr>
                        <td>{{ order.order_number }}</td>
                        <td>{{ order.customer.name }}</td>
                        <td>{{ order.vehicle.plate_number }}</td>
                        <td>{{ order.created_at.strftime('%Y-%m-%d %H:%M:%S') }}</td>
                        <td>
                            <span class="status-badge status-{{ order.status }}">{{ order.status }}</span>
                        </td>
                        <td>{{ order.total_amount }}</td>
                        <td>{{ order.operator }}</td>
                        <td>
                            <a href="{{ url_for('order_items', order_id=order.id) }}" class="action-btn" style="background-color: #28a745;">配件管理</a>
                            <a href="{{ url_for('print_order', id=order.id) }}" class="action-btn" style="background-color: #6c757d;" target="_blank">打印</a>
                            <a href="#" class="action-btn" style="background-color: #17a2b8;" onclick="showStatusModal('{{ order.id }}')">更新状态</a>
                            <a href="#" class="action-btn edit-btn" onclick="showEditModal('{{ order.id }}', '{{ order.customer_id }}', '{{ order.vehicle_id }}', '{{ order.status }}', '{{ order.repair_notes }}')">编辑</a>
                            <a href="#" class="action-btn delete-btn">删除</a>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
            
            {{ render_pagination(pagination, 'orders', status=current_status) }}
        </div>
    </div>

    <!-- 添加状态更新模态框 -->
    <div id="statusModal" class="modal">
        <div class="modal-content">
            <span class="close" onclick="hideStatusModal()">&times;</span>
            <h2>更新维修状态</h2>
            <form action="{{ url_for('update_order_status') }}" method="POST">
                <input type="hidden" id="order_id" name="order_id">
                <div class="form-group">
                    <label for="status">维修状态</label>
                    <select id="status" name="status" required>
                        <option value="待维修">待维修</option>
                        <option value="维修中">维修中</option>
                        <option value="已完成">已完成</option>
                        <option value="已取消">已取消</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="repair_notes">维修备注</label>
                    <textarea id="repair_notes" name="repair_notes"></textarea>
                </div>
                <button type="submit" class="nav-item add-btn">保存</button>
            </form>
        </div>
    </div>

    <script>
        function showModal() {
            document.getElementById('addModal').style.display = 'block';
        }
        
        function hideModal() {
            document.getElementById('addModal').style.display = 'none';
        }
        
        window.onclick = function(event) {
            var modal = document.getElementById('addModal');
            if (event.target == modal) {
                modal.style.display = "none";
            }
        }

        function showStatusModal(orderId) {
            document.getElementById('order_id').value = orderId;
            document.getElementById('statusModal').style.display = 'block';
        }

        function hideStatusModal() {
            document.getElementById('statusModal').style.display = 'none';
        }

        function showEditModal(id, customerId, vehicleId, status, repairNotes) {
            document.getElementById('edit_id').value = id;
            document.getElementById('edit_customer').value = customerId;
            document.getElementById('edit_vehicle').value = vehicleId;
            document.getElementById('edit_status').value = status;
            document.getElementById('edit_repair_notes').value = repairNotes || '';
            document.getElementById('editModal').style.display = 'block';
        }
        
        function hideEditModal() {
            document.getElementById('editModal').style.display = 'none';
        }

        // 添加客户选择联动车辆的功能
        document.getElementById('edit_customer').addEventListener('change', function() {
            const customerId = this.value;
            const vehicleSelect = document.getElementById('edit_vehicle');
            // 清空现有选项
            vehicleSelect.innerHTML = '';
            
            // 根据选中的客户筛选车辆
            {% for vehicle in vehicles %}
            if ('{{ vehicle.customer_id }}' === customerId) {
                const option = document.createElement('option');
                option.value = '{{ vehicle.id }}';
                option.textContent = '{{ vehicle.plate_number }}';
                vehicleSelect.appendChild(option);
            }
            {% endfor %}
        });
    </script>
</body>
</html> 